<template>
    <div class="shopcart">
        <table id="tb">
            <tr id="tr1">
                <td colspan="2">商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
            <tr v-for="cart,index in carts" :key="cart.id" id="items">
                <td><img :src="require(`../assets/bookimg/${cart.isbn}.jpg`)"></td>
                <td><span>{{cart.bookname}}</span></td>
                <td>{{cart.price}}</td>
                <td>
                    <Numbtn :sp="cart"></Numbtn>
                </td>
                <td><span>{{cart.price*cart.num}}</span></td>
                <td><button @click="remove(index)">删除</button></td>
            </tr>
        </table>
        <div id="bottom"> 
            总价：{{total}}，数量：{{count}}
            <button>结算</button>
        </div>
    </div>
</template>
<style src="../style/shopcart.css" scoped>

</style>
<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import Numbtn from '../components/numbtn.vue'
export default {
    components: {//组件
    Numbtn
  },
    computed:{ 
        ...mapState(['carts']),
        ...mapGetters(['total','count']),
    },
    methods:{
        ...mapMutations(['remove'])
    },
}
</script>